import { useState, useCallback, useMemo } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);

  // 每次组件重新渲染时，回调函数都需要重新创建
  // 希望：函数得到缓存
  // useCallback(callback, [依赖项]) -> 返回是一个新函数，新函数的功能和callback是一样的
  // 当组件重新重新渲染时，如果依赖项没有发生变化，就返回原来的函数（被缓存的函数）
  // 如果依赖项发生变化，返回新函数
  const handleClick1 = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const handleClick2 = () => {
    setNum(num + 1);
  };

  // useMemo 缓存函数的计算结果
  // 当组件重新重新渲染时，如果依赖项没有发生变化，就返回之前的计算结果（缓存的结果）
  // 如果依赖项发生变化，就会重新计算，返回新值
  const oddOrEven = useMemo(() => {
    console.log("oddOrEven");
    return num % 2 === 1 ? "奇数" : "偶数";
  }, [num]);

  return (
    <>
      <div>
        点击次数1：{count}
        <button onClick={handleClick1}>按钮</button>
      </div>

      <div>
        点击次数2：{num} ---- {oddOrEven}
        <button onClick={handleClick2}>按钮</button>
      </div>
    </>
  );
}
